<template>
  <div>
    <button @click="countClick">count:{{ count }}</button>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watch,
  isRef,
  isProxy,
  isReadonly,
  isReactive,
  unref,
  readonly,
} from "vue";
const count = ref(0);
const info = reactive({
  msg: "jdz",
});
const readonlyCount = readonly(count);

// 检查某个值是否为 ref 可以被用作TS类型守卫：
const countClick = () => {
  count.value += 1;
  console.log(count);
  console.log(isRef(count));
  // 如果参数是 ref，则返回内部值，否则返回参数本身 可以被用作TS类型守卫：
  console.log(unref(count));

  // 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理
  console.log(isProxy(info));
  // 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。
  console.log(isReactive(info));
  // 检查一个对象是否是由 readonly() 或 shallowReadonly() 创建的代理
  console.log(isReadonly(readonlyCount));
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
